<template>
    <!-- #ifdef MP-WEIXIN -->
    <!-- <view 
    data-text="hehe"
    @touchstart.stop="test.touchstart" @mousedown.stop="movestart" @touchmove.stop="test.touchmove" @mousemove.stop="moveing" @touchend.stop="moveend" @mouseup.stop="moveend" @mouseleave.stop="moveend" 
    class="absolute movable" :style="[
    props.direction == 'horizontal'?{width:props.size+'rpx',height:props.size+'rpx',transform:`translateX(${_x}px)`,top:'0px'}:'',
    props.direction == 'vertical'?{width:props.size+'rpx',height:props.size+'rpx',transform:`translateY(${_x}px)`,left:0+'rpx',top:'0px'}:'',
    ]">
        <tm-sheet :followTheme="props.followTheme" :shadow="1" :border="4" :userInteractionEnabled="false" :color="props.color" :round="24" :width="props.size" :height="props.size" :margin="[0,0]" :padding="[0,0]"></tm-sheet>
    </view> -->

    <!-- #endif -->
    
    <view 
    @touchstart.stop="movestart" @mousedown.stop="movestart" @touchmove.stop="moveing" @mousemove.stop="moveing" @touchend.stop="moveend" @mouseup.stop="moveend" @mouseleave.stop="moveend" 
    class="absolute" :style="[
    props.direction == 'horizontal'?{width:props.size+'rpx',height:props.size+'rpx',transform:`translateX(${_x}px)`,top:'0px'}:'',
    props.direction == 'vertical'?{width:props.size+'rpx',height:props.size+'rpx',transform:`translateY(${_x}px)`,left:0+'rpx',top:'0px'}:'',
    ]">
        <tm-sheet :followTheme="props.followTheme" :shadow="1" :border="4" :userInteractionEnabled="false" :color="props.color" :round="24" :width="props.size" :height="props.size" :margin="[0,0]" :padding="[0,0]"></tm-sheet>
    </view>

</template>

<script lang="ts" setup>
import { computed } from 'vue';
import tmSheet from '../tm-sheet/tm-sheet.vue';

const emits = defineEmits(['movestart','moveing','moveend'])
const props = defineProps({
	//是否跟随全局主题的变换而变换
	followTheme: {
		type: [Boolean, String],
		default: true
	},
   size:{
        type:Number,
        default:40
    },
    x:{
        type:Number,
        dfault:0
    },
    color:{
        type:String,
        default:'primary'
    },
      /**
     * 方向
     * horizontal:水平,
     * vertical:竖向。
     */
    direction:{
        type:String,
        default:"vertical"
    },
    
})
const _x = computed(()=>props.x)
let timerId = NaN;
let timerId2 = NaN;
function debounce(func: Function, wait = 500, immediate = false) {
	// 清除定时器
	if (!isNaN(timerId)) clearTimeout(timerId);
	// 立即执行，此类情况一般用不到

	if (immediate) {
		var callNow = !timerId;
		timerId = setTimeout(() => {
			timerId = NaN;
		}, wait);

		if (callNow) typeof func === "function" && func();
	} else {
		// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
		timerId = setTimeout(() => {
			typeof func === "function" && func();
		}, wait);
	}
}

function movestart(e:TouchEvent|MouseEvent){
	let etype = e.type.toLocaleLowerCase();
    let ex = 0;
    let ey =0;
    if(etype=='mousedown'){
        ex=e.pageX;
        ey=e.pageY;
    }else if(etype == 'touchstart'){
        ex=e.changedTouches[0].pageX;
        ey=e.changedTouches[0].pageY;
    }
    emits('movestart',{x:ex,y:ey})
}
function moveing(e:TouchEvent|MouseEvent){
	let etype = e.type.toLocaleLowerCase();
    let ex = 0;
    let ey =0;
    if(etype=='mousemove'){
        ex=e.pageX;
        ey=e.pageY;
    }else if(etype == 'touchmove'){
        ex=e.changedTouches[0].pageX;
        ey=e.changedTouches[0].pageY;
    }
	debounce(()=>{
		emits('moveing',{x:ex,y:ey})
	},5,false)
     e.preventDefault()
     e.stopPropagation()
}
function moveend(e:TouchEvent|MouseEvent){
	let etype = e.type.toLocaleLowerCase();
    let ex = 0;
    let ey =0;
    if(etype=='mouseup'||etype=="mouseleave"){
        ex=e.pageX;
        ey=e.pageY;
    }else if(etype == 'touchend'){
        ex=e.changedTouches[0].pageX;
        ey=e.changedTouches[0].pageY;
    }
    emits('moveend',{x:ex,y:ey})
}

</script>
<script lang="ts">
export default {
    data(){
        return {
            hehe:9999
        }
    },
    mounted(){
    
    }
}
</script>

<script module="test" lang="wxs">
// 暂时用不了.uni官方不支持setup中使用wsx,使用了可以,但无法使用模板变量.
	var startX = 0
	var startY = 0
	var lastLeft = 0; var lastTop = 0
    function setDefaultXY(x,y){
        // lastLeft = x;
       return x
    }
	function touchstart(event, ins) {
        console.log(JSON.stringify(ins.selectComponent('.movable')))

	  var touch = event.touches[0] || event.changedTouches[0]
	  startX = touch.pageX
	  startY = touch.pageY
	}
	function touchmove(event, ins) {
	  var touch = event.touches[0] || event.changedTouches[0]
	  var pageX = touch.pageX
	  var pageY = touch.pageY
	  var left = pageX - startX + lastLeft
	  var top = pageY - startY + lastTop
	  startX = pageX
	  startY = pageY
	  lastLeft = left
	  lastTop = top

	  ins.selectComponent('.movable').setStyle({
	    left: left + 'px',
	    // top: top + 'px'
	  })
		return false
	}
    function touchend(event, ins) {
        
    }
	module.exports = {
        setDefaultXY:setDefaultXY,
		lastLeft: lastLeft,
	  touchstart: touchstart,
	  touchmove: touchmove
	}
</script>